{php include wl_template('common/header');}
<style>
    .container{background:#fff;}
    .table>tbody>tr>td{line-height:3;padding: 8px 2px;}
    th,table thead tr th:last-child, table tbody tr td:last-child{text-align:center;}
    table>tr:first-child{height:42px;}
    .table>tbody>tr>th{line-height: 2.5}

    .container label{
        width: 60px;
        line-height: 34px;
    }
    #shangchengZHL{height:500px;}
    table.SJ{
        margin-bottom: 50px;
    }
    .title{
        padding: 20px 0;
        text-align: center;
        font-size: 20px;
        font-weight: 600;
    }
    .btn-default:focus,.btn-default.active{
        background-color: #44b549;
        color: #fff0cc;
        border-color: #ccc;
        box-shadow:none;
    }
</style>

<div class="navbar-header">
    <!--<a href="##" class="navbar-brand">数据概况分析  <font color="black" size="2">(更新时间{php echo date('Y-m-d H:i:s',TIMESTAMP);})</font></a>-->
</div>
<div class="container">
    <div class="title">数据实时概况</div>
    <table class="table SJ">
        <tr>
            <th></th>
            <th>PV</th>
            <th>UV</th>
            <th>下单数量</th>
            <th>支付数量</th>
            <th>退款数量</th>
            <th>开团总数</th>
            <th>成功团数</th>
            <th>失败团数</th>
            <th>支付金额</th>
            <th>退款金额</th>
            <th>成交金额</th>
            <th>客单价</th>
            <th>新增粉丝</th>
        </tr>
        <!--<tr>-->
            <!--<td>今日实时</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
            <!--<td>测试</td>-->
        <!--</tr>-->
    </table>


    <div class="col-xs-7">
        <table class="table table-striped">
            <tr>
                <th colspan="4">
                    <div style="float: left;font-size: 16px;">商城转化率统计</div>
                    <div class="btn-group topGM" role="group">
                        <button type="button" class="btn btn-default active">今天</button><button type="button" class="btn btn-default">昨天</button><button type="button" class="btn btn-default">最近七天</button><button type="button" class="btn btn-default">最近30天</button>
                    </div>
                </th>
            </tr>
        </table>
    </div>
    <div  class="col-xs-5">
        <div id="shangchengZHL"></div>
    </div>

</div>

<script>

    $.get(location.origin+'/minapi.php?op=sjgk_data&uniacid={$_W["uniacid"]}',function(res) {
        var data=JSON.parse(res);
        console.log(data);
        var html="<tr>";
        for(var i in data){
            if(!data[i]){
                html += '<td>' + i + '</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>';
            }else{
                html += '<td>' + i + '</td><td>'+(data[i]["pv"]||"0")+'</td><td>'+(data[i]["uv"]||"0")+'</td><td>' + (data[i]["order_total"]||"0") + '</td><td>'+(data[i]["order_pay"]||"0")+'</td><td>' + (data[i]["order_refund"]||"0") + '</td><td>'+(data[i]["group_total"]||"0")+'</td><td>'+ (data[i]["group_success"]||"0") + '</td><td>'+(data[i]["group_fail"]||"0")+ '</td><td>'+(data[i]["pay_price"]||"0")+'</td><td>'+(data[i]["refund_price"]||"0")+'</td><td>'+(data[i]["success_price"]||"0")+'</td><td>'+Number(data[i]["customer_price"]).toFixed(2)+'</td><td>'+(data[i]["add_fans"]||"0")+'</td></tr>';
            }
        }
        $('table.SJ').append(html);
    });

    // 路径配置
    require.config({
        paths: {
            echarts: "http://echarts.baidu.com/build/dist"
        }
    });

    $('.topGM').on('click','button',function(){
        if($(this).hasClass('active')){return false;}
        $('.topGM button').removeClass('active');
        $(this).addClass('active');
        if($(this).html()=='今天'){
            ajaxZHL(getBeforeDate(0),getBeforeDate(0));
        }else if($(this).html()=='昨天'){
            ajaxZHL(getBeforeDate(1),getBeforeDate(1));
        }else if($(this).html()=='最近七天'){
            ajaxZHL(getBeforeDate(6),getBeforeDate(0));
        }else if($(this).html()=='最近30天'){
            ajaxZHL(getBeforeDate(29),getBeforeDate(0));
        }
    });
    var option = {
        title : {
            text: '',
            subtext: ''
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        legend: {
            data : ['访问','下单','付款','成功']
        },
        calculable : true,
        series : [
            {
                name:'商城转化率',
                type:'funnel',
                x: '10%',
                y: 60,
                //x2: 80,
                y2: 60,
                width: '80%',
                // height: {totalHeight} - y - y2,
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort : 'descending', // 'ascending', 'descending'
                gap : 10,
                itemStyle: {
                    normal: {
                        // color: 各异,
                        borderColor: '#fff',
                        borderWidth: 1,
                        label: {
                            show: true,
                            position: 'inside'
                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                        },
                        labelLine: {
                            show: false,
                            length: 10,
                            lineStyle: {
                                // color: 各异,
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    emphasis: {
                        // color: 各异,
                        borderColor: 'red',
                        borderWidth: 5,
                        label: {
                            show: true,
                            formatter: '{b}:{c}%',
                            textStyle:{
                                fontSize:20
                            }
                        },
                        labelLine: {
                            show: true
                        }
                    }
                },
                data:[
                    {value:100, name:'访问'},
                    {value:0, name:'下单'},
                    {value:0, name:'付款'},
                    {value:0, name:'成功'}
                ]
            }
        ]
    };
    ajaxZHL(getBeforeDate(0),getBeforeDate(0));
    function ajaxZHL(a,b) {
        $.get(
                location.origin + '/minapi.php?op=sczhl_data&uniacid={$_W["uniacid"]}',
                {
                    stime: a,
                    etime: b
                },
                function (res) {
                    var data = JSON.parse(res).data;
                    console.log(JSON.parse(res));
                    console.log(a);
                    console.log(b);
                    console.log(data);
                    console.log(data.order_pay_openid);
                    console.log(data.uv);
                    var zfzhl=(data.uv||"0")=="0"?0:Number(Number(data.order_pay_openid) / Number(data.uv) * 100).toFixed(2);
                    var sczhl=(data.uv||"0")=="0"?0:Number(Number(data.order_success_openid) / Number(data.uv) * 100).toFixed(2);
                    var html = '<tr><td>访客数<br>' + (data.uv||"0") + '</td><td>支付转化率(访客→付款)<br>' + zfzhl + '%</td><td>商城转化率(访客→成功)<br>' + sczhl + '%</td><td></td></tr>' +
                            '<tr><td>下单人数<br>' + (data.order_buy_openid||"0") + '</td><td>下单笔数<br>' + (data.order_total||"0") + '</td><td>下单金额<br>' + (data.order_buy_price||"0") + '</td><td></td></tr>' +
                            '<tr><td>付款人数<br>' + (data.order_pay_openid||"0") + '</td><td>付款笔数<br>' + (data.order_pay||"0") + '</td><td>付款金额<br>' + (data.pay_price||"0") + '</td><td></td></tr>' +
                            '<tr><td>成功人数<br>' + (data.order_success_openid||"0") + '</td><td>成功笔数<br>' + (data.order_success_num||"0") + '</td><td>成功金额<br>' + (data.success_price||"0") + '</td><td>客单价<br>' + (data.customer_price||"0") + '</td></tr>';
                    if($('.table-striped tr').length>1){$('.table-striped tr:gt(0)').remove()}
                    $('.table-striped').append(html);
                    console.log((Number(data.order_buy_openid)/Number(data.uv)).toFixed(2));
                    option.series[0].data[1]['value']=(((Number(data.order_buy_openid)/Number(data.uv)).toFixed(2)*100)||0);
                    option.series[0].data[2]['value']=(((Number(data.order_pay_openid)/Number(data.uv)).toFixed(2)*100)||0);
                    option.series[0].data[3]['value']=(((Number(data.order_success_openid)/Number(data.uv)).toFixed(2)*100)||0);
                    ajaxEh(option)
                }
        );
    }

    function ajaxEh(option) {
        require(
                [
                    'echarts',
                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                    'echarts/chart/line',
                    'echarts/chart/funnel',
                    'echarts/chart/pie'
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('shangchengZHL'));
                    myChart.setOption(option);
                }
        );
    }

    function getBeforeDate(n){
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon=d.getMonth()+1;
        var day=d.getDate();
        if(day <= n){
            if(mon>1) {
                mon=mon-1;
            }
            else {
                year = year-1;
                mon = 12;
            }
        }
        d.setDate(d.getDate()-n);
        year = d.getFullYear();
        mon=d.getMonth()+1;
        day=d.getDate();
        s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
        return s;
    }
</script>














{php include wl_template('common/footer');}